<template>
  <div class="box">
    <div class="box1" v-if="isShow">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt />
      <div class="user">
        <div class="txt">
          <div class="img">
            <img src="http://liufusong.top:8080/img/profile/avatar.png" alt />
          </div>
          <p>游客</p>
          <div class="link">
            <router-link to="/login">去登录</router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="box1" v-else>
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt />
      <div class="user">
        <div class="txt">
          <div class="img">
            <img src="http://liufusong.top:8080/img/profile/avatar.png" alt />
          </div>
          <p class="p1">好客_508871</p>
          <div class="link" >
            <router-link to="/layout/user"><span @click="btn">退出</span></router-link>
          </div>
          <p class="colors">编辑个人资料></p>
        </div>
      </div>
    </div>
    <div class="list">
      <van-grid :column-num="3">
        <van-grid-item icon="star-o" text="我的收藏" to='/collect' />
        <van-grid-item icon="wap-home-o" text="我的出租" to='/taxi' />
        <van-grid-item icon="underway-o" text="看房记录" />
        <van-grid-item icon="vip-card-o" text="成为房主" />
        <van-grid-item icon="manager-o" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>
    <div class="box2">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HaokeUser',
  data () {
    return {
      token: '',
      isShow: true

    }
  },
  created () {
    this.token = localStorage.getItem('token')
    console.log(this.token)
    if (this.token !== null) {
      this.isShow = !this.isShow
    }
  },
  mounted () {},

  methods: {
    btn () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确认退出'
      })
        .then(() => {
          localStorage.removeItem('token')
          this.$router.go(0)
          this.$toast.loading({
            message: '加载中...',
            forbidClick: true
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped>
.user .colors{
color: #999;
}
.box2 {
  width: 344px;
  margin: 0 auto;
  margin-top: 20px;
}
.box2 img{
  width: 100%;
}
.img {
  position: relative;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border: 5px solid #f5f5f5;
  display: inline-block;
  box-shadow: 0 2px 2px #bdbdbd;
}
.img img {
  width: 100%;
}
p {
  text-align: center;
  transform: translateY(-30px);
  font-size: 12px;
}
.box1 {
  width: 375px;
  position: relative;
}
.link {
  border: 1px solid #21b97a;
  background-color: #21b97a;
  width: 70px;
  height: 30px;
  /* padding: 20px; */
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  transform: translateY(-30px);
}
.link a {
  color: #fff;
}
.box1 {
  width: 375px;
  height: 300px;
}
.box1 img {
  width: 100%;
}
.user {
  background-color: #fff;
  position: absolute;
  top: 136px;
  left: 8%;
  width: 317px;
  height: 165px;
  box-shadow: 0 0 10px 3px #ddd;
}
.txt {
  position: absolute;
  top: 0;
  left: 123px;
}
.list{
  margin-top: 20px;
}
</style>
